<template>
  <div class = "bpmn-panel">
    <el-container>
      <el-header height = "45px">
        <div :class = "{active: configTab=='node'}" @click = "handleConfigSelect('node')" class = "config-tab">节点属性
        </div>
        <div :class = "{active: configTab=='process'}" @click = "handleConfigSelect('process')" class = "config-tab">
          流程属性
        </div>
      </el-header>
      <el-main>

        <node-property-panel :formData = "formData" :modeler = "modeler" :nodeElement = "nodeElement"
                             @modifyConfigTab = "modifyConfigTab" @modifyFormData = "modifyFormData"
                             v-if = "configTab=='node'"/>
        <process-property-panel :element = "element" :modeler = "modeler" :process-data = "process"
                                v-if = "configTab=='process'"/>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import NodePropertyPanel from "./NodePropertyPanel";
import ProcessPropertyPanel from "./ProcessPropertyPanel";

export default {
  name: "JbpmPropertyPanel",
  data() {
    return {
      configTab: 'node',
      panelIndex: 1,
      element: null,
      nodeElement: {},
      formData: {}
    }
  },
  props: {
    modeler: {
      type: Object,
      required: true
    },
    process: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.handleModeler();
  },
  methods: {
    handleConfigSelect(value) {
      this.configTab = value;
    },
    handleModeler() {
      const _this = this;
      //根节点添加事件
      this.modeler.on("root.added", e => {
        let element = e.element;
        if (this.isImplicitRoot(element)) {
          return;
        }
        this.element = element;
      });
      //
      this.modeler.on("commandStack.changed", () => {
        console.log("commandStack.changed");
        _this.modeler.saveXML({format: true}, function (err, xml) {
          _this.$emit('updateXml', xml)
        });
      })
      //节点选择变化
      this.modeler.on("selection.changed", e => {
        console.log("selection.changed");
        const element = e.newSelection[0];
        if (!element) {
          return;
        }
        this.modifyConfigTab(element);
        this.handleFormData(element);
      })
      //节点属性变化
      this.modeler.on("element.changed", e => {
        console.log("element.changed");
        const {element} = e;
        if (!element) {
          return;
        }
        this.handleFormData(element);
      });
      //节点点击事件
      this.modeler.on("element.click", e => {
        console.log("element.click");
        const {element} = e;
        if (element.type == this.modeler._definitions.rootElements[0].$type) {
          this.modifyConfigTab(0)
        } else {
          this.modifyConfigTab(1)
          if (element.type == "bpmn:UserTask") {
            let _businessObject = element.businessObject;
            if (_businessObject.assignee) {
              _this.formData.userType = "assignee";
              _this.formData.assignee = _businessObject.assignee;
            }
          }
        }
      })
    },
    isImplicitRoot(element) {
      return element.id === '__implicitroot';
    },
    modifyConfigTab(element) {
      let configTab = 'node'
      if (!element) {
        configTab = 'process'
      }
      this.configTab = configTab
    },
    handleFormData(element) {
      if (!element.id) {
        return;
      }
      let businessObject = element.businessObject;
      this.formData = {
        type: element.type,
        id: businessObject.id,
        name: businessObject.name,
        userType: businessObject.$attrs.userType,
        assignee: businessObject.$attrs.assignee,
        candidateGroups: businessObject.$attrs.candidateGroups,
        candidateUsers: businessObject.$attrs.candidateUsers ? businessObject.$attrs.candidateUsers.split(",") : [],
        sequenceFlow: businessObject.conditionExpression ? businessObject.conditionExpression.body : ''
      }
      console.log(element);
      this.nodeElement = element;
    },
    modifyFormData(data) {
      this.formData.assignee = data.assignee;
      this.formData.userType = data.userType;
    }
  },
  components: {
    NodePropertyPanel, ProcessPropertyPanel
  }
}
</script>

<style scoped>
.bpmn-panel {
  width: 350px;
  border: 1px solid #eeeeee;
  padding: 0 5px;
}

.el-header {
  border-bottom: solid 2px #e4e7ed;
  padding: 0;
}

.config-tab {
  height: 43px;
  line-height: 43px;
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
}

.config-tab.active {
  border-bottom: solid 2px #409EFF;
}

.bpmn-panel {
  width: 370px;
  border: 1px solid #eeeeee;
  padding: 0 5px;
}

.el-select--small {
  width: 100%;
}

.el-dialog > .el-dialog__header {
  padding: 5px 20px;
}

.el-dialog > .el-dialog__body {
  padding: 0px;
  margin: 0 20px;
  border: 1px solid #cccccc;
}

.default-undo {
  color: #c0c4cc;
}
</style>
